import React, { Component, PropTypes } from 'react';
import {
  Text,
  View,
  ScrollView,
  StyleSheet,
  DeviceEventEmitter,
  Platform,
  Image,
  Animated,
  TouchableOpacity,
  Dimensions,
  NativeAppEventEmitter,
  InteractionManager
} from 'react-native';

import ScrollableTabView from 'react-native-scrollable-tab-view';

import ProgressBar from '../global/ProgressBar';
import DefaultTabBar from '../global/scrollableTabView/DefaultTabBar';
import Button from '../global/scrollableTabView/Button';

import NormalList from './delivery/normalList';
import styles from './ownerInfoStyle';
import api from 'services/api';

const windowHeight = Dimensions.get('window').height;

class DeliveryList extends Component {
    constructor(props) {
		super(props);

    this.heightTop = (windowHeight / 2) *(-1);

		this.state = {
			isLoading: true,
			isRefreshing: false,
			tab: 0,
      isShow: false,
      display: 'none',
      num: [0, 0]
		};

		this._onChangeTab = this._onChangeTab.bind(this);

	}

  componentWillMount() {
	}

  componentDidMount(){
      this.getNotApprovedCount();
      let Emitter = Platform.OS === 'android' ? DeviceEventEmitter : NativeAppEventEmitter;
      this._subcribOwner = Emitter.addListener('delivery.onload', this.onLoad.bind(this));
  }

  onLoad(){
    InteractionManager.runAfterInteractions(async() => {
        this._notApproveListView && this._notApproveListView.wrappedInstance.onLoad();
        this._passListView && this._passListView.wrappedInstance.onLoad();
        this._rejectListView && this._rejectListView.wrappedInstance.onLoad();
        this.getNotApprovedCount()
    });
  }

  async getNotApprovedCount(){
      let res, arr = [0 , 0];
      res = await api.post('/delivery/countUnApproveStatus',{});
      if(res){
          arr[0] = res.data;
      }

      this.setState({ num : arr});
  }

  _onChangeTab({ i, ref }) {
		this.setState({ tab: i });
	}

  updateMarkNum(arr){
      this.setState({ num : arr});
  }

  componentWillUnmount(){
      this._subcribOwner && this._subcribOwner.remove();
  }

  _pressItem(){

  }

  _renderTab(name, page, isTabActive, onPressHandler) {
    const {textStyle, markStyle, markTextStyle, } = styles;
    const textColor = isTabActive ? '#EA5404' : '#555555';
    const fontWeight = isTabActive ? 'bold' : 'normal';
    let markDom = null,count = this.state.num[page];
    if(count){
      markDom = (
        <View style={[markStyle]}>
          {count>99?<Text style={[markTextStyle,{fontSize:8}]}>99+</Text>:<Text style={markTextStyle}>{count}</Text>}
        </View>
      )
    }

    return (
      <Button
        style={{flex: 1, }}
        key={name}
        accessible={true}
        accessibilityLabel={name}
        accessibilityTraits='button'
        onPress={() => onPressHandler(page)}
      >
        <View style={[{flex:1,alignItems: 'center',justifyContent: 'center',paddingBottom: 10}, this.props.tabStyle, ]}>
          <Text style={[textStyle, {color: textColor, fontWeight, }, ]}>
            {name}
          </Text>
          {markDom}
        </View>
      </Button>
    );
  }

  render() {
      return (
        <View style={styles.container}>
          <ScrollableTabView
              onChangeTab={this._onChangeTab}
              locked={true}
              scrollWithoutAnimation={true}
              ref={component => this.scrollTab = component}
              renderTabBar={() => (
                  <DefaultTabBar
                      ref={component => this.tabBar = component}
                      activeTextColor={"#EA5404"}
                      textStyle={styles.textStyle}
                      renderTab={this._renderTab.bind(this)}
                      markStyle={styles.markStyle}
                      markTextStyle={styles.markTextStyle}
                      underlineStyle={styles.underlineStyle}
                      style={styles.tabBar}
                  />
              )}>
              <NormalList
                  tabLabel="未审核"
                  tab={0}
                  approveStatus={0}
                  parent={this}
                  ref={(component) => this._notApproveListView = component }
                  navigator={this.props.navigator}/>
              <NormalList
                  tabLabel="审核通过"
                  tab={1}
                  parent={this}
                  ref={(component) => this._passListView = component }
                  approveStatus={1}
                  navigator={this.props.navigator}/>
              <NormalList
                  tabLabel="审核驳回"
                  tab={2}
                  parent={this}
                  approveStatus={2}
                  ref={(component) => this._rejectListView = component }
                  navigator={this.props.navigator}/>
          </ScrollableTabView>
        </View>
      );
  }
}

var connectHelper = require('../../services/connectHelper');
DeliveryList = connectHelper(state => state)(DeliveryList);

module.exports = DeliveryList;
